<!--打卡记录-->
<template lang="html">
    <div class="container_return">
	    <mt-header fixed title="打卡记录">
		    <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
		    <span slot="right" style="font-size: 0.3rem" @click="sortclick">按时间排序</span>
	    </mt-header>
	    <!--列表-->
        <div class="listreturn" v-for="item in checkindata">
			<span class="titletime">{{item.time}}</span>
	        <div class="timesdiv">
		        <div class="timelist" style="border-bottom: 0.01rem dashed #ffc63f">
			        <span class="timemoring"></span>
			        <span style="font-size: 0.35rem">上班卡</span>
			        <span style="margin-left: 0.2rem;">
				        <span style="font-size: 0.35rem;" v-if="item.morningTime !=null">{{item.morningTime}}</span>
				        <span style="font-size: 0.35rem;color: #fa7e05;" v-else>未打卡</span>
			        </span>
		        </div>
		        <div class="timelist">
			        <span class="Nighticon"></span>
			        <span style="font-size: 0.35rem">下班卡</span>
			        <span style="margin-left: 0.2rem;">
				        <span style="font-size: 0.35rem;" v-if="item.afterTime !=null">{{item.afterTime}}</span>
				        <span style="font-size: 0.35rem;color: #fa7e05;" v-else>未打卡</span>
			        </span>
		        </div>
	        </div>
        </div>
	    <span class="bottom-title" v-if="loadhide" @click="loaddataadd"><span>点击加载更多</span></span>
		<!--end-->
    </div>
</template>
<script>
	import app from '~/assets/api/config'
	export default {
		data() {
			return {
				checkindata: [],//列表数据
				sorttype: 'desc',//排序
				loadhide: true,//是否有下一页
				numadd: 1,//页码
			}
		},
		methods: {
			Returnclick() {//返回
				this.$router.go(-1);
			},
			getlistdata() {//列表
				let _that = this;
				this.$axios.post(app.API_BES_URL + '/api/backend/v1/checkin/getcheckInLog', {
					sort: _that.sorttype,
					page: _that.numadd,
				}).then(function (res) {
					if (res.data.code == 0) {
						_that.checkindata = _that.checkindata.concat(res.data.data);
						if (res.data.data.length < 5) {
							_that.loadhide = false;
						}
					}
				});
			},
			sortclick() {//排序
				let _that = this;
				_that.numadd = 1;
				if (_that.sorttype == "desc") {
					_that.sorttype = "asc";
				} else {
					_that.sorttype = "desc";
				}
				this.$axios.post(app.API_BES_URL + '/api/backend/v1/checkin/getcheckInLog', {
					sort: _that.sorttype,
					page: _that.numadd,
				}).then(function (res) {
					if (res.data.code == 0) {
						_that.checkindata = res.data.data;
						if (res.data.data.length < 5) {
							_that.loadhide = false;
						} else {
							_that.loadhide = true;
						}
					}
				});
			},
			loaddataadd() {//分页
				this.numadd++;
				this.getlistdata();
			}
		},
		mounted() {
			this.getlistdata();
		},
	}
</script>


<style scoped lang="less">
	.container_return {
	    width: 100%;
	    margin: 0 auto;
	    .listreturn {
	        float: left;
	        width: 100%;
	        margin-top: 30px;
	        .titletime {
	            color: #fff;
	            background: #3b83f7;
	            font-size: 30px;
	            border-radius: 0 22.5px 22.5px 0;
	            padding: 7.5px 37.5px 7.5px 37.5px;
	        }
	        .timesdiv {
	            background: #fff;
	            margin-top: 18.75px;
	            .timelist {
	                color: #2e2e2e;
	                margin-left: 37.5px;
	                padding-top: 15px;
	                padding-bottom: 15px;
	                .timemoring {
	                    background: url('../assets/image/morginico.png') no-repeat;
	                    background-size: 100%;
	                    width: 43.75px;
	                    height: 43.75px;
	                    float: left;
	                    margin-right: 15px;
	                }
	                .Nighticon {
	                    background: url('../assets/image/Nighticon.png') no-repeat;
	                    background-size: 100%;
	                    width: 43.75px;
	                    height: 43.75px;
	                    float: left;
	                    margin-right: 15px;
	                }
	            }
	        }
	    }
	    .bottom-title {
	        text-align: center;
	        float: left;
	        width: 100%;
	        height: 75px;
	        margin-top: 22.5px;
	        margin-bottom: 15px;
	        span {
	            display: block;
	            font-size: 22.5px;
	            color: #ddd;
	            position: relative;
	        }
	        span:before,
	        span:after {
	            content: '';
	            position: absolute;
	            top: 52%;
	            background: #ddd;
	            width: 30%;
	            height: 2.25px;
	        }
	        span:before {
	            left: 10%;
	        }
	        span:after {
	            right: 10%;
	        }
	    }
	}
</style>